<template>
  <div class="global">
      <div class="head">
          <div>
              <h3 class="title" style="color: #fff;">高校教师成果管理系统</h3>
          </div>
          <div class="">
              <el-menu :default-active="$route.path" router class="el-menu-demo menu1" mode="horizontal">
                  <el-menu-item index="userhome">首页</el-menu-item>
                  <el-menu-item index="/teacher/myproduct">我的成果</el-menu-item>
                  <el-menu-item index="/teacher/Personal">个人中心</el-menu-item>

              </el-menu>
          </div>
          <div class="">

              <img v-if="user.icon == null" src="../../assets/logo.png"
                  style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;"
                  alt="" srcset="">
              <img v-else :src="user.icon"
                  style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;"
                  alt="" srcset="">

              <el-dropdown>
                  <span class="el-dropdown-link" style="color: #fff;">
                      {{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="fabu">通知与消息</el-dropdown-item>                    
                      <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>

          </div>
      </div>
    
      <router-view></router-view>
  </div>
</template>
<script>
import service from '@/utils/request';
export default {
  data() {
      return {
          user: {}
      }
  },
  mounted(){
this.getinfo()
  },
  methods:{
    async getinfo() {
            const res = await service.get("/auth/info");
            console.log(res)
            this.user = res.data.userInfo
            window.localStorage.setItem("userinfo", JSON.stringify(this.user))
        },
      personal(){

   this.$router.push({
    path:"/userinfo"
   })
    
  },
  fabu(){

    this.$router.push({
    path:"/teacher/notice"
   })
    
  },
    
  
  logout(){
    window.localStorage.clear()
    this.$router.push({
      path:"/"
    })
  }
  }
}
</script>
<style scoped>
.head {
  width: 100%;
  height: 60px;
  padding: 0px 10px;
  box-sizing: border-box;
  background: #64c5b1;
  display: flex;
  justify-content: space-around;

}
.head .el-menu{
  background: transparent !important;
  color: #fff !important;
}
.head .el-menu-item{
  color: #fff !important;
}
.menu1 .is-active{
background: #2bb7e5!important;
}
.menu1 .el-submenu__title:hover{
  background: #2bb7e5!important;
}

.menu1 .el-menu-item:hover{
  background: #2bb7e5!important;
}
.global {
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  overflow: auto;

}
</style>